<template>
  <basic-container>

    <el-container>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-scope el-card box-card is-always-shadow">
          <h4 class="dd-dataCenter-heading ng-binding">信息总览</h4>
          <div class="row row padding-top20">
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">今日出勤情况</div>
                <br>
                <div class="dd-person-status ng-binding">
                  已出勤
                  <span type='text' class="pull text-danger ng-binding" @click="capitalList('本日用电',1)" v-text="form.income_hour">
                  </span>
                </div>
                <div class="dd-person-status ng-binding">未出勤
                  <span type='text' class="pull text-success ng-binding" @click="capitalList('本月用电',0)" v-text="form.income_day">
                  </span>
                </div>
              </div>
            </div>
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">员工流动情况情况</div>
                <br>
                <div class="dd-person-status ng-binding">在职人数
                  <span type='text' class="pull text-success ng-binding" @click="employeeList('在职人数',form.employee)" v-text="form.employee">
                  </span>
                </div>
                <div class="dd-person-status ng-binding">离职人数
                  <span type='text' class="pull text-danger ng-binding" @click="employeeList('离职人数',form.employee_lz)" v-text="form.employee_lz">
                  </span>
                </div>
              </div>
            </div>
            <div class=" col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">员工合同预警</div>
                <br>
                <div class="dd-person-status ng-binding">逾期人数
                  <span type='text' class="pull text-success ng-binding" @click="employeeList('逾期人数',form.insurance)" v-text="form.insurance">
                  </span>
                </div>
                <div class="dd-person-status ng-binding">逾期预警(3个月内)
                  <span type='text' class="pull text-danger ng-binding" @click="employeeList('逾期预警',form.insurance_no)" v-text="form.insurance">
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-12 member-chart ng-scope el-card box-card is-always-shadow">
          <h4 class="dd-dataCenter-heading ng-binding">电表详情</h4>
          <div class="row row padding-top20">
            <avue-data-tabs :option="option"></avue-data-tabs>
          </div>
        </div>
        <div class="col-sm-12 member-chart ng-scope el-card box-card is-always-shadow attendance ">
          <div>
            <h4 class="dd-dataCenter-heading ng-binding">出勤情况</h4>
          </div>
          <div class="attDate" style="width:30%">
            <h4 style="width:150px;font-size: 16px;">考勤日期：</h4>
            <el-date-picker type="date" value-format="yyyy/MM/dd" v-model="date" @change="changeCharts" placeholder="选择考勤日期"></el-date-picker>
          </div>
        </div>
        <div class="col-sm-12">
          <div id="memberLineChart" class="member-line-chart" _echarts_instance_="1543301061157" style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
            <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
          </div>
        </div>
        <div class="col-sm-12 member-chart ng-scope el-card box-card is-always-shadow ">
          <h4 class="dd-dataCenter-heading ng-binding">人员分析</h4>
        </div>
        <div class="col-sm-12">
          <company></company>
        </div>
      </el-main>
      <el-dialog :title="employeeTitle" width="50%" :visible.sync="employeeVisible" :close-on-click-modal="false">
        <el-table :data="employeeDatas" style="width:100%;" border stripe :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange">
          <el-table-column prop="index" :formatter="index_formatter" label="序号"></el-table-column>
          <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
          <el-table-column prop="dept" label="部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar" id="pageDiv">
          <el-pagination small background :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
        </el-col>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="employeeVisible=false">关闭</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="capitalTitle" width="800px" :visible.sync="capitalVisible" :close-on-click-modal="false">

        <div id="cashLineChart" class="member-line-chart">
          <div id="myCashChart" :style="{width: '780px', height: '400px'}"></div>
        </div>
      </el-dialog>
    </el-container>
  </basic-container>
</template>

<script>
import { mapGetters } from 'vuex'
import { listPowerDevices } from '@/api/community'
import deptTree from '../report/deptTree.vue'
import company from './report_enter'
export default {
  name: 'table_dept',
  components: {
    deptTree,
    company
  },
  data() {
    return {
      num: 0,
      date: new Date(),
      title: '今',
      employeeDatas: [],
      gridDatas: [],
      sort: {
        sort: 'sort',
        order: 'asc'
      },
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      employeeTitle: '',
      capitalTitle: '',
      listLoading: false,
      dialogStatus: false,
      isDanwei: true,
      dialogFormVisible: false,
      addDisabled: true,
      employeeVisible: false,
      _btn_add_flag: false,
      capitalVisible: true,
      baseEmployee: [],
      capitalDatas: [],
      baseDate: [],
      capital: 2,
      form: {
        income_mon: 2634,
        income_day: 103,
        income_hour: 17,
        employee: 78,
        employee_lz: 3,
        insurance: 2,
        insurance_no: 2
      },
      data_now: [],
      data_last: [],
      data: [70, 5, 1, 5, 1, 8],
      data1: [75, 2, 3, 5, 1, 4],
      data2: [80, 2, 2, 2, 2, 2],
      data3: [85, 1, 1, 1, 1, 1],
      data4: [86, 2, 1, 3, 1, 3],
      baseEmployee: [],
      list: []
    }
  },
  created() {
    this.list = [
      {
        powerName: '总电表',
        power: 1072.5,
        color: 'green',
        minPower: 10632,
        maxPower: 163222,
        deviceId: '00013479000000013492',
        powerId: '00001'
      },
      {
        powerName: '地暖电表',
        power: 2,
        color: 'red',
        minPower: 10632,
        maxPower: 163222,
        deviceId: '00013479000000013492',
        powerId: '00001'
      }
    ]
  },
  computed: {
    option() {
      let data = []
      this.list.forEach(ele => {
        console.log(ele)
        data.push({
          title: ele.powerName + '(度)',
          subtitle: '截止到今日',
          count: ele.power + ' °',
          allcount: '本月用电： ' + ele.minPower,
          text: '最大功率： ' + ele.maxPower,
          color: ele.color,
          key: '电',
          href: `/#/report/capacity_power?deviceId=${ele.deviceId}&powerId=${
            ele.powerId
          }&powerName=${ele.powerName}`
        })
      })
      return {
        span: 6,
        data: data
      }
    }
  },
  methods: {
    capitalList(name, type) {
      this.capitalVisible = true
      this.capitalTitle = name

      for (var i = 1; i < 30; i++) {
        var now = new Date((base += oneDay))
        this.date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        )
      }

      console.log(date)
      console.log(hourData)
    },
    changeCharts(val) {
      this.num++
      if (this.num % 2 == 0) {
        this.data = this.data1
      } else {
        this.data = this.data2
      }
      console.log(this.num)
      this.title = val + ' '
      this.drawLine()
    },

    drawLine() {
      this.capitalVisible = false
      const safe = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption(
        {
          tooltip: {},
          toolbox: {
            show: true,
            orient: 'horizontal',
            x: '80%',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack', 'tiled']
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          title: {
            text: this.title + '日考勤情况',
            x: 'center',
            y: 'top',
            textAlign: 'center'
          },
          xAxis: {
            type: 'category',
            data: ['正常', '迟到', '早退', '缺卡', '旷工', '外勤']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '人数',
              type: 'bar',
              data: safe.data,
              itemStyle: {
                normal: {
                  color: '#409EFF'
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: 'auto',
                  fontSize: '20'
                }
              }
            }
          ]
        },
        true
      ),
        myChart.on('click', function(param) {
          // if (param.value > 10) {
          //   this.employeeDatas = this.baseEmployee
          // } else {
          //   for (var i = 0; i < param.value; i++) {
          //     this.employeeDatas[i] = this.baseEmployee[i]
          //   }
          // }
          safe.employeeList(param.name, param.value)
        })
    },
    // employeeList(name, num) {
    //   this.employeeVisible = true
    //   this.employeeTitle = name
    // },
    employeeList(name, num) {
      this.employeeDatas = []
      if (num > 10) {
        this.employeeDatas = this.baseEmployee
      } else {
        for (var i = 0; i < num; i++) {
          this.employeeDatas[i] = this.baseEmployee[i]
        }
      }
      this.employeeVisible = true
      this.employeeTitle = name
    },
    handleSortChange(sort) {
      this.sort = {
        sort: sort.prop,
        order: sort.order == 'ascending' ? 'asc' : 'desc'
      }
    },
    tableRowClassName(row, index) {
      //把每一行的索引放进row
      row.index = row.rowIndex
    },
    headStyle({ row, rowIndex }) {
      return 'table_head_style'
    },
    index_formatter: function(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index
    },
    handleCurrentChange(val) {
      this.page = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
    },
    resetSearchForm(formName) {
      this.$refs.filters.resetFields()
    },
    selsChange: function(sels) {
      this.sels = sels
    },
    cancel(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    }
  },
  mounted() {
    this.drawLine()
  }
}
</script>
<style lang="scss" scoped>
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 3px;
  margin-bottom: 10px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 40%;
  justify-content: center;
  align-items: Center;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.padding-top20 {
  padding-top: 2px;
}
.dd-dataCenter-panel {
  max-width: 220px !important;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  padding: 0 20px;
}
.pull {
  color: #409eff;
  float: right;
  font-size: 16px;
  cursor: pointer;
}
</style>

